﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/events</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
            div {
                margin: 3px;
                width: 50px;
                height: 50px;
                /*position: absolute;*/
                left: 10px;
                top: 300px;
                background-color: yellow;
                /*display:none;*/
            }
            div.newcolor {
                background-color: red;
            }
  		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		    console.log( "jQuery version: " + $.fn.jquery );
        </script>
    </head>
    <body>
        <h1>jQuery/Events部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">event.currentTarget</td>
                <td>The current DOM element within the event bubbling phase. </td>
            </tr>
            <tr>
                <td class="syntax">event.data</td>
                <td>An optional object of data passed to an event method when the current executing handler is bound. </td>
            </tr>
            <tr>
                <td class="syntax">event.delegateTarget</td>
                <td>The element where the currently-called jQuery event handler was attached.</td>
            </tr>
            <tr>
                <td class="syntax">event.metaKey</td>
                <td> Indicates whether the META key was pressed when the event fired</td>
            </tr>
            <tr>
                <td class="syntax">event.namespace</td>
                <td>The namespace specified when the event was triggered.</td>
            </tr>
            <tr>
                <td class="syntax">event.pageX</td>
                <td>The mouse position relative to the left edge of the document.</td>
            </tr>
            <tr>
                <td class="syntax">event.pageY</td>
                <td>The mouse position relative to the left edge of the document.</td>
            </tr>
            <tr>
                <td class="syntax">event.isDefaultPrevented()</td>
                <td>Returns whether event.preventDefault() was ever called on this event object. </td>
            </tr>
            <tr>
                <td class="syntax">event.preventDefault()</td>
                <td>If this method is called, the default action of the event will not be triggered.</td>
            </tr>
            <tr>
                <td class="syntax">event.relatedTarget</td>
                <td>The other DOM element involved in the event, if any. 例如, mouseout 中的进入的element.</td>
            </tr>
            <tr>
                <td class="syntax">event.result</td>
                <td>The last value returned by an event handler that was triggered by this event, unless the value was undefined.</td>
            </tr>
            <tr>
                <td class="syntax">event.isImmediatePropagationStopped()</td>
                <td> Returns whether event.stopImmediatePropagation() was ever called on this event object. </td>
            </tr>
            <tr>
                <td class="syntax">event.stopImmediatedPropagation</td>
                <td>Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.</td>
            </tr>
            <tr>
                <td class="syntax">event.isPropagationStopped()</td>
                <td> Returns whether event.stopPropagation() was ever called on this event object. </td>
            </tr>
            <tr>
                <td class="syntax">event.stopPropagation</td>
                <td>Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.注意于stopImmediatedPropagation()的区别.</td>
            </tr>
            <tr>
                <td class="syntax">event.target</td>
                <td>The DOM element that initiated the event. </td>
            </tr>
            <tr>
                <td class="syntax">event.timeStamp</td>
                <td>The difference in milliseconds between the time the browser created the event and January 1, 1970.</td>
            </tr>
            <tr>
                <td class="syntax">event.type</td>
                <td>Describes the nature of the event.</td>
            </tr>
            <tr>
                <td class="syntax">event.which</td>
                <td>For key or mouse events, this property indicates the specific key or button that was pressed.</td>
            </tr>
            <tr>
                <td class="syntax">.on()</td>
                <td>Attach an event handler function for one or more events to the selected elements</td>
            </tr>
            <tr>
                <td class="syntax">.off()</td>
                <td>Remove an event handler.</td>
            </tr>
            <tr>
                <td class="syntax">.bind()</td>
                <td>Deprecated, use .on().  Attach a handler to an event for the elements.</td>
            </tr>
            <tr>
                <td class="syntax">.unbind()</td>
                <td>Deprecated. use .off()</td>
            </tr>
            <tr>
                <td class="syntax">.blur()</td>
                <td> Bind an event handler to the "blur" JavaScript event, or trigger that event on an element. Shortcut for .on( "blur", handler ) </td>
            </tr>
            <tr>
                <td class="syntax">.change()</td>
                <td>a shortcut for .on( "change", handler ). The change event is sent to an element when its value changes. </td>
            </tr>
            <tr>
                <td class="syntax">.click()</td>
                <td>a shortcut for .on( "click", handler ). The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. </td>
            </tr>
            <tr>
                <td class="syntax">.contextmenu()</td>
                <td> a shortcut for .on( "contextmenu", handler ).  The contextmenu event is sent to an element when the right button of the mouse is clicked on it, but before the context menu is displayed.</td>
            </tr>
            <tr>
                <td class="syntax">.dblclick()</td>
                <td>a shortcut for .on( "dblclick", handler ).  The dblclick event is sent to an element when the element is double-clicked.</td>
            </tr>
            <tr>
                <td class="syntax">.delegate()</td>
                <td>deprecated, use .on().</td>
            </tr>
            <tr>
                <td class="syntax">.die()</td>
                <td>deprecated. use .off()</td>
            </tr>
            <tr>
                <td class="syntax">.error()</td>
                <td>deprecated. use .on( "error", handler ).</td>
            </tr>
            <tr>
                <td class="syntax">.focus()</td>
                <td>a shortcut for .on( "focus", handler ). The focus event is sent to an element when it gains focus.</td>
            </tr>
            <tr>
                <td class="syntax">.focusin()</td>
                <td> .on( "focusin", handler ).  The focusin event is sent to an element when it, or any element inside of it, gains focus. </td>
            </tr>
            <tr>
                <td class="syntax">.focusout()</td>
                <td>.on( "focusout", handler ). The focusout event is sent to an element when it, or any element inside of it, loses focus. </td>
            </tr>
            <tr>
                <td class="syntax">.hover()</td>
                <td> Bind two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. 对应mouseenter和mouseleave event.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.holdReady()</td>
                <td>deprecated.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.proxy()</td>
                <td>deprecated. use the native Function.prototype.bind() method instead.</td>
            </tr>
            <tr>
                <td class="syntax">jQuery.ready</td>
                <td>A Promise-like object (or "thenable") that resolves when the document is ready.</td>
            </tr>
            <tr>
                <td class="syntax">.keydown()</td>
                <td>a shortcut for .on( "keydown", handler ) </td>
            </tr>
            <tr>
                <td class="syntax">.keypress()</td>
                <td>a shortcut for .on( "keypress", handler ) </td>
            </tr>
            <tr>
                <td class="syntax">.keyup()</td>
                <td>a shortcut for .on( "keyup", handler ) </td>
            </tr>
            <tr>
                <td class="syntax">.live()</td>
                <td>removed. use .on() instead.</td>
            </tr>
            <tr>
                <td class="syntax">.load()</td>
                <td>removed. use .on( "load", handler )</td>
            </tr>
            <tr>
                <td class="syntax">.mousedown()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.mouseenter()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.mouseleave()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.mousemove()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.mouseout()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.mouseover()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.mouseup()</td>
                <td></td>
            </tr>
            <tr>
                <td class="syntax">.one()</td>
                <td>Attach a handler to an event for the elements. The handler is executed at most once per element per event type.</td>
            </tr>
            <tr>
                <td class="syntax">.ready()</td>
                <td> Specify a function to execute when the DOM is fully loaded. 推荐使用 $( handler )</td>
            </tr>
            <tr>
                <td class="syntax">.resize()</td>
                <td>a shortcut for .on('resize', handler).</td>
            </tr>
            <tr>
                <td class="syntax">.scroll()</td>
                <td> a shortcut for .on( "scroll", handler ). The scroll event is sent to an element when the user scrolls to a different place in the element. </td>
            </tr>
            <tr>
                <td class="syntax">.select()</td>
                <td> a shortcut for .on( "select", handler ). The select event is sent to an element when the user makes a text selection inside it. This event is limited to &ltinput type="text"&gt fields and &lttextarea&gt boxes. </td>
            </tr>
            <tr>
                <td class="syntax">.submit</td>
                <td>a shortcut for .on( "submit", handler ). The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to &ltform&gt elements. </td>
            </tr>
            <tr>
                <td class="syntax">.toggle()</td>
                <td>deprecated/removed.</td>
            </tr>
            <tr>
                <td class="syntax">.trigger()</td>
                <td> Execute all handlers and behaviors attached to the matched elements for the given event type.</td>
            </tr>
            <tr>
                <td class="syntax">.triggerHandler()</td>
                <td> Execute all handlers attached to an element for an event. 注意与.trigger()的区别.</td>
            </tr>
            <tr>
                <td class="syntax">.undelegate()</td>
                <td>deprecated.</td>
            </tr>
            <tr>
                <td class="syntax">.unload()</td>
                <td>removed. use .on( "unload", handler ).</td>
            </tr>
        </table>
        <p></p>
    <hr/>
    请打开console观察输出.
    
    </body>
</html>
